window.onload= function(){
	var gpsBtn = document.getElementById('gpsBtn');
	var map, pos, infoWindow;
	var current;
	var newMarker = [];
	var MARKER_PATH = 'https://maps.gstatic.com/intl/en_us/mapfiles/marker_green';

	gpsBtn.onclick = function(){
	
		var service;
		var mapOptions = {
				zoom: 15
		};
		map = new google.maps.Map(document.getElementById('mapCanvas'),
		mapOptions);
		
		infoWindow = new google.maps.InfoWindow({
			content: document.getElementById('info-content')
		});
		if(navigator.geolocation) {
			navigator.geolocation.getCurrentPosition(function(position) {
			pos = new google.maps.LatLng(position.coords.latitude,
					position.coords.longitude);
			 current = new google.maps.Marker({
				map : map,
				animation : google.maps.Animation.BOUNCE,
				position : pos
			 });
			
			google.maps.event.addListener(current, 'btn.onclick', function(){
				
				if(current.getAnimation() != null){
					current.setAnimation(null);
				}else{
					current.setAnimation(google.maps.Animation.BOUNCE);
				}
			});
			
			var request = {
			location: pos,
			radius: '500',
			name : "치킨"
			};

			infowindows = new google.maps.InfoWindow();
			service = new google.maps.places.PlacesService(map);
			service.search(request, callback);
		     
			map.setCenter(pos);
			}, function() {
				handleNoGeolocation(true);
			});
		} else 
			handleNoGeolocation(false);
		 };
		
		function callback(results, status) {
			
			if (status == google.maps.places.PlacesServiceStatus.OK){
				 
			for (var i = 0; i < results.length; i++) {
				
				var markerLetter = String.fromCharCode('A'.charCodeAt(0) + i);
				var markerIcon = MARKER_PATH + markerLetter + '.png';
				newMarker[i] = new google.maps.Marker({
					map: map,
					position: results[i].geometry.location,
					icon : markerIcon
				});  

				newMarker[i].placeResult = results[i];
				google.maps.event.addListener(newMarker[i], 'click', showInfo);
				setTimeout(dropMarker(i), i*1000);					 
				addResult(results[i], i);
			} 	
				
		}
	}
		
		function dropMarker(i){
			return function(){
				newMarker[i].setMap(map);
			};
		}

		//由ъ뒪��蹂댁뿬二쇨린, td��湲�옄�됱쓣 愿�━�섎뒗 寃껉낵, 寃쎄린由ъ뒪���됱씠 寃뱀퀜 愿�━媛��꾩슂�섎떎.
		function addResult(result, i){
			
			var results = document.getElementById('lists');
			var markerLetter = String.fromCharCode('A'.charCodeAt(0) + i);
			var markerIcon = MARKER_PATH + markerLetter + '.png';

			var tr = document.createElement('tr');
			tr.style.backgroundColor = (i % 2 == 0 ? '#F0F0F0' : '#FFFFFF');
			tr.onclick = function() {
				google.maps.event.trigger(newMarker[i], 'click');
			};			 
			 var iconTd = document.createElement('td');
			 var nameTd = document.createElement('td');
			 var addTd = document.createElement('td');
			 var phoneTd = document.createElement('td');
			 
			 var icon = document.createElement('img');
			 icon.src = markerIcon;
			 var name = document.createTextNode(result.name);
			 var address = document.createTextNode(result.vicinity);

			  iconTd.appendChild(icon);
			  nameTd.appendChild(name);
			  addTd.appendChild(address);
			  tr.appendChild(iconTd);
			  tr.appendChild(nameTd);
			  tr.appendChild(addTd);
			  results.appendChild(tr);
		 }
		
		function showInfo(){
			var marker2 = this;
			var request = {reference : marker2.placeResult.reference}
			var service = new google.maps.places.PlacesService(map);
			service.getDetails(request, function(place, status){
				if(status == google.maps.places.PlacesServiceStatus.OK){
					infoWindow.open(map, marker2);
					buildWindow(place);
				}
			});
		}
		
		function buildWindow(place){
			document.getElementById('name').textContent = '이름: ' + place.name;
		
			document.getElementById('address').textContent = '주소 : ' + place.vicinity;
			if(place.website){
				var website = place.website;
				document.getElementById('website').innerHTML = '웹사이트 : ' + '<b><a href=' + website + 
				 ' target="_blank">' + website + '</a></b>';
			}else{
				document.getElementById('website').innerHTML = " ";
			}
			
			if(place.formatted_phone_number){
				var phoneNumber = place.formatted_phone_number;
				document.getElementById('phone').innerHTML = '폰 : ' + '<b><a href="tel:' + phoneNumber + 
				'">'+ phoneNumber +'</a></b>';
			}else{
				document.getElementById('phone_row').style.display = 'none';
			}

		}
		
		function handleNoGeolocation(errorFlag) {
		 if (errorFlag) {
		   var content = 'Error: The Geolocation service failed.';
		 } else {
		   var content = 'Error: Your browser doesn\'t support geolocation.';
		 }
	}
		google.maps.event.addDomListener(window, 'load');// start		
}